<template>
  <div>
    <div class="search-con search-con-top">
      <div class="fl">
        <Select v-model="condition.bid" clearable placeholder="请选择商家" class="search-col" @on-change="change3" style="width:200px">
          <Option v-for="item in businessList" :value="item.bid" :key="item.bid">{{ item.name }}</Option>
        </Select>
        <Input clearable placeholder="输入租赁品名称搜索" class="search-input" v-model="condition.lname"/>
        <Button class="search-btn" type="primary" @click="List">搜索</Button>
      </div>
      <div class="fr">
        <!-- <Button class="search-btn" type="primary" @click="vivisle=true">新增租用物品</Button> -->
      </div>
    </div>
    <tables ref="tables" editable :border="true" v-model="tableData" :columns="columns" :page="page" @pageSize="pageSize" @pageNum="pageNum"/>
    <Modal
        title="租用物品管理"
        v-model="vivisle"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="handleReset('tableItem')"
        class-name="vertical-center-modal">
        <Form ref="tableItem" :model="tableItem" :rules="ruleValidate" :label-width="80">
          <FormItem label="会员名称" prop="uid">
            <Select v-model="tableItem.uid" clearable :label-in-value="true" placeholder="请选择会员" size="large" style="width:200px" @on-change="change01">
                <Option v-for="item in userList" :value="item.uid" :key="item.uid">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="物品名称" prop="did">
            <Select v-model="tableItem.did" clearable :label-in-value="true" placeholder="请选择物品名称" size="large" style="width:200px" @on-change="change02">
                <Option v-for="item in leaseResDetaiList" :value="item.did" :key="item.did">{{ item.code }}</Option>
            </Select>
          </FormItem>
          <FormItem label="人员名称" prop="aid">
            <Select v-model="tableItem.aid" clearable :label-in-value="true" placeholder="请选择租赁点人员名称" size="large" style="width:200px" @on-change="change03">
                <Option v-for="item in adminList" :value="item.aid" :key="item.aid">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="商家" prop="bid">
            <Select v-model="tableItem.bid" clearable :label-in-value="true" placeholder="请选择商家" size="large" style="width:200px" @on-change="change04">
                <Option v-for="item in businessList" :value="item.bid" :key="item.bid">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="备注" prop="remark">
            <Input type="textarea" v-model="tableItem.remark" placeholder="请输入备注"></Input>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="handleReset('tableItem')">取消</Button>
        <Button type="primary" size="large" @click="Save('tableItem')">确定</Button>
      </div>
    </Modal>
     <Modal
        title="租用物品归还管理"
        v-model="vivisleb"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="handleReset('tableItemb')"
        class-name="vertical-center-modal">
        <Form ref="tableItemb" :model="tableItemb" :rules="ruleValidateb" :label-width="80">
          <FormItem label="人员名称" prop="backaid">
            <Select v-model="tableItemb.backaid" clearable :label-in-value="true" placeholder="请选择租赁点人员名称" size="large" style="width:200px" @on-change="change03">
                <Option v-for="item in adminList" :value="item.aid" :key="item.aid">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="商家" prop="backbid">
            <Select v-model="tableItemb.backbid" clearable :label-in-value="true" placeholder="请选择商家" size="large" style="width:200px" @on-change="change04">
                <Option v-for="item in businessList" :value="item.bid" :key="item.bid">{{ item.name }}</Option>
            </Select>
          </FormItem>
         <FormItem label="租赁费用" prop="leacost">
              <Input v-model="tableItemb.leacost" placeholder="请输入租赁费用"></Input>
          </FormItem>
        <FormItem label="其他费用" prop="other">
              <Input v-model="tableItemb.other" placeholder="请输入其他费用"></Input>
          </FormItem>
        <FormItem label="总费用" prop="totalcost">
              <Input v-model="tableItemb.totalcost" placeholder="请输入总费用"></Input>
          </FormItem>
        <FormItem label="备注" prop="remark">
            <Input type="textarea" v-model="tableItemb.remark" placeholder="请输入备注"></Input>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="handleReset('tableItemb')">取消</Button>
        <Button type="primary" size="large" @click="Save1('tableItemb')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "_c/tables";
import { resLeaseL,businessB,adminB,leaseResDetailL,userB,resLeaseA,resLeaseK,agree,queryCost} from "@/api/data";
import { getId } from '@/libs/util'
export default {
  name: "Rental",
  components: {
    tables: Tables
  },
  data() {
    return {
      vivisle: false,
      vivisleb: false,
      userList: [],
      adminList: [],
      leaseResDetaiList:[],
      // id
      itemId: "",
      // 详情
      tableItem: {
      },
      tableItemb: {},
      // 条件
      condition: {
        pageNum: 1,
        pageSize: 10
      },
      businessList: [],
      // table表头
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
          key: ""
        },
        {
          title: "账号",
          key: "unickname"
        },
        {
          title: "租赁品名称",
          key: "lname",
        },
        {
          title: "租赁时间",
          key: "createtm",
        },
        {
          title: "押金",
          key: "deposit",
        },
        {
          title: "租赁费用",
          key: "leacost",
        },
        {
          title: "归还租赁点人员姓名",
          key: "banickname",
        },
        {
          title: "退回时间",
          key: "backtm",
        },
        {
          title: "状态",
          key: "status",
          render:(h, params)=>{
                let text = '';
                switch (params.row.status) {
                    case 0:
                        text = '申请中'
                        break;
                    case 1:
                        text = '借用中'
                        break;
                    case 2:
                        text = '已退租'
                        break;
                    case 3:
                        text = '故障维修中'
                        break;
                    default:
                        break;
                }
            return h("div",text);
            }
        },
        {
          title: '操作',
          key: 'handle',
          button: [
            (h, params, vm) => {
              // let show = params.row.status == '借用中' || params.row.status == '申请中'
              let show = params.row.status == 1 || params.row.status == 0
              let text = ''
              let status = 0 //0统一申请  1归还
              switch (params.row.status) {
                case 0:
                  text = '同意申请'
                  status = 0
                  break;
                case 1:
                  text = '归还'
                  status = 1
                  break;
                default:
                  break;
              }
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      display: show ? "block" : 'none'
                    },
                    on: {
                      click: () => {
                        this.itemId = params.row.id;
                        if(status==0){
                          this.agreeFun(params.row._index)
                        }else if(status==1){
                          this.Query();
                          this.queryCostMth(params.row.id)
                        }
                      }
                    }
                  },
                  text
                )
              ];
            }
          ]
        }
      ],
      // table数据
      tableData: [],
      // 分页数据
      page: {
        current: 1,
        total: 0,
        pageSize: 10
      },
      ruleValidate: {
        uid: [
          {
            required: true,
            message: "请选择会员名称",
            trigger: "change"
          }
        ],
        did: [
          {
            required: true,
            message: "请选择物品",
            trigger: "change"
          }
        ],
        aid: [
          {
            required: true,
            message: "请选择租赁点人员",
            trigger: "change"
          }
        ],
        bid: [
          {
            required: true,
            message: "请选择发行商家",
            trigger: "change"
          }
        ]
      },
      ruleValidateb: {
        backaid: [
          {
            required: true,
            message: "请选择租赁点人员",
            trigger: "change"
          }
        ],
        backbid: [
          {
            required: true,
            message: "请选择租赁点",
            trigger: "change"
          }
        ],
        other: [
          {
            required: true,
            message: "其他费用不能为空",
            trigger: "blur"
          }
        ],
        leacost: [
          {
            required: true,
            message: "租赁费用不能为空",
            trigger: "blur"
          }
        ],
        totalcost: [
          {
            required: true,
            message: "总费用不能为空",
            trigger: "blur"
          }
        ],
      }
    };
  },
  mounted() {
    this.List();
    this.ListB1();
    this.ListB2();
    this.ListB3();
    this.ListB4();
  },
  methods: {
    fmt(timestamp) {
      var day = "",
          month = "",
          hours = "",
          minutes = "",
          s = "",
          d = new Date(timestamp);
      day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
      month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth()+1) : (d.getMonth()+1);
      hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
      minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
      s = d.getMinutes() < 60 ? '0' + d.getSeconds() : d.getSeconds();
      var date = (d.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes+ ":" + s);
      return date
    },
    agreeFun(index){
      let obj = {
          id:this.itemId,
          aid:this.$store.state.user.aid?this.$store.state.user.aid: getId()
      }
      agree(obj).then(res => {
        if (res.code==1) {
         this.tableData[index].status = 1
        }
      });
    },
    handleReset (name) {
      this.vivisle = false
      this.vivisleb = false
      this.$refs[name].resetFields();
      this.$set(this,'tableItem',{

      })
      this.$set(this,'tableItemb',{

      })
    },
    pageSize(value) {
      this.condition.pageSize = value
      this.condition.pageNum = 1
      this.List()
    },
    pageNum(value) {
      this.condition.pageNum = value
      this.List()
    },
    change3 (item) {
      if(item){
        this.condition.bid = item
      }
    },
    change01 (item) {
      if(item&&item.value) {
        this.tableItem.uid = item.value
      }
    },
    change02 (item) {
      if(item&&item.value) {
        this.tableItem.did = item.value
      }
    },
    change03 (item) {
      if(item&&item.value) {
        this.tableItem.aid = item.value
      }
    },
    change04 (item) {
      if(item&&item.value) {
        this.tableItem.bid = item.value
      }
    },
    ListB4() {
      var obj = {
        status: 1,
        category: 1
      }
      businessB(obj).then(res => {
        if (res.code==1) {
        this.businessList = res.data
        }
      });
    },
    ListB1() {
      userB().then(res => {
        if (res.code==1) {
        this.userList = res.data
        }
      });
    },
    ListB3() {
      adminB().then(res => {
        if (res.code==1) {
        this.adminList = res.data
        }
      });
    },
    ListB2() {
      var obj = {
        status: 1
      }
      leaseResDetailL(obj).then(res => {
        if (res.code==1) {
        this.leaseResDetaiList = res.data
        }
      });
    },
    // 分页数据获取
    List() {
      resLeaseL(this.condition).then(res => {
        if (res.code==1) {
        let { data, total } = res.data;
        if(data&& data.length>0){
          data.forEach(ele => {
            // ele.status = ele.status==1?'借用中':'已归还'
            // ele.createtm = new Date(ele.createtm)
          });
          this.tableData = data;
        } else{
          this.tableData = []
        }
        this.page.total = total;
        }
      });
    },
    Query() {
      this.vivisleb = true
    },
    Delete() {
      couponD({ id: this.itemId }).then(res => {
        if (res.code === 1) {
          this.itemId = "";
          this.List();
        }
      });
    },
    queryCostMth(id) {
      queryCost({ id }).then(res => {
        if (res.code === 1) {
          this.List();
        }
      });
    },
    // 保存
    Save(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var obj = this.tableItem
          resLeaseA(obj).then(res => {
            if (res.code === 1) {
              this.vivisle = false
              this.handleReset(name)
              this.List();
            }
          });
        }
      });
    },
    Save1(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var obj = this.tableItemb
          obj.id = this.itemId
          resLeaseK(obj).then(res => {
            if (res.code === 1) {
              this.vivisle = false
              this.handleReset(name)
              this.List();
            }
          });
        }
      });
    }
  }
};
</script>
